/**
 * 演示代码不考虑性能和美观性
 */

const canvas = document.getElementById('webgl')
const gl = getWebGLContext(canvas)//使用封装好的，来适应不同brower

function main() {

    if (!gl) {
        console.log('const gl error')
        return
    }

    gl.clearColor(0.0, 0.0, 0, 1)
    gl.clear(gl.COLOR_BUFFER_BIT)

    let red = 0, green = 0, blue = 0
    setInterval(() => {
        red = colorAndOpacityLimit(red)
        changeColorAndRefresh(red, green, blue, 1)
    }, 1000 * 0.1)
    setInterval(() => {
        green = colorAndOpacityLimit(green)
        changeColorAndRefresh(red, green, blue, 1)
    }, 1000 * 0.3)
    setInterval(() => {
        blue = colorAndOpacityLimit(blue)
        changeColorAndRefresh(red, green, blue, 1)
    }, 1000 * 0.6)
}

function changeColorAndRefresh(red, green, blue, opacity) {

    gl.clearColor(red, green, blue, opacity)
    gl.clear(gl.COLOR_BUFFER_BIT)
}

function colorAndOpacityLimit(color) {
    color += 0.01
    return color > 1 ? 0 : color
}
